JQuery UIjs动态添加删除表格行的代码
例子，js实现动态添加与删除表格行。
复制代码 代码示例:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>增加table行_ym97.com/wenku</title>
</head>
< script language="javascript">// example: obj = findobj("image1");
function findobj(theobj, thedoc){
var p, i, foundobj;
if(!thedoc) thedoc = document; if( (p = theobj.indexof("?")) > 0 && parent.frames.length) { thedoc = parent.frames[theobj.substring(p+1)].document; theobj =
theobj.substring(0,p); } if(!(foundobj = thedoc[theobj]) && thedoc.all) foundobj = thedoc.all[theobj]; for (i=0; !foundobj && i < thedoc.forms.length; i++) foundobj
= thedoc.forms[i][theobj]; for(i=0; !foundobj && thedoc.layers && i < thedoc.layers.length; i++) foundobj = findobj(theobj,thedoc.layers[i].document); if(!foundobj &&
document.getelementbyid) foundobj = document.getelementbyid(theobj); return foundobj;}
//添加一个参与人填写行
function addsignrow(){ //读取最后一行的行号，存放在txttrlastindex文本框中
var txttrlastindex = findobj("txttrlastindex",document);
var rowid = parseint(txttrlastindex.value);
var signframe = findobj("signframe",document);
//添加行
var newtr = signframe.insertrow(signframe.rows.length);
newtr.id = "signitem" + rowid;
//添加列:序号
var newnametd=newtr.insertcell(0);
//添加列内容
newnametd.innerhtml = newtr.rowindex.tostring();
//添加列:姓名
var newnametd=newtr.insertcell(1);
//添加列内容
newnametd.innerhtml = "<input type='text' size='12' />";
//添加列:电子邮箱
var newemailtd=newtr.insertcell(2);
//添加列内容
newemailtd.innerhtml = "<input type='text' size='20' />";
//添加列:电话
var newteltd=newtr.insertcell(3);
//添加列内容
newteltd.innerhtml = "<input type='text' size='10' />";
//添加列:手机
var newmobiletd=newtr.insertcell(4);
//添加列内容
newmobiletd.innerhtml = "<input type='text' size='12' />";
//添加列:公司名
var newcompanytd=newtr.insertcell(5);
//添加列内容
newcompanytd.innerhtml = "<input type='text' size='20' />";
//添加列:删除按钮
var newdeletetd=newtr.insertcell(6);
//添加列内容
newdeletetd.innerhtml = "<div><a href='javascript:;' onclick=/"deletesignrow('signitem" + rowid + "')/">删除</a></div>";
//将行号推进下一行
txttrlastindex.value = (rowid + 1).tostring() ;
}
//删除指定行
function deletesignrow(rowid){
var signframe = findobj("signframe",document);
var signitem = findobj(rowid,document);
//获取将要删除的行的index
var rowindex = signitem.rowindex;
//删除指定index的行
signframe.deleterow(rowindex);
//重新排列序号，如果没有序号，这一步省略
for(i=rowindex;i<signframe.rows.length;i++){
signframe.rows[i].cells[0].innerhtml = i.tostring();
}
}//清空列表
function clearallsign(){
if(confirm('确定要清空所有参与人吗？')){
var signframe = findobj("signframe",document);
var rowscount = signframe.rows.length;
//循环删除行,从最后一行往前删除
for(i=rowscount - 1;i > 0; i--){
signframe.deleterow(i);
}
//重置最后行号为1
var txttrlastindex = findobj("txttrlastindex",document);
txttrlastindex.value = "1";
//预添加一行
addsignrow();
}
}
< /script>
<body>
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" id="signframe">
<tr id="trheader">
<td width="27" bgcolor="#96e0e2">序号</td>
<td width="64" bgcolor="#96e0e2">用户姓名</td>
<td width="98" bgcolor="#96e0e2">电子邮箱</td>
<td width="92" bgcolor="#96e0e2">固定电话</td>
<td width="86" bgcolor="#96e0e2">移动手机</td>
<td width="153" bgcolor="#96e0e2">公司名称</td>
<td width="57" align="center" bgcolor="#96e0e2"> </td>
</tr>
</table>
</div>
<div>
<input type="button" name="submit" value="添加参与人" onclick="addsignrow()" />
<input type="button" name="submit2" value="清空" onclick="clearallsign()" />
<input type='hidden' value="1" />
</div>
</body>
< /html>
相关热词：
本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！
本文地址: https://v30.fanwenzhu.com/jq/jc/8220.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
PHP识别相片是否是颠倒的
时间：2020-12-28
-
python编程有哪些ide
时间：2020-12-28
-
python开发工程师是做什么
时间：2020-12-28
-
php构造函数的作用
时间：2020-12-28
-
php怎么跟数据库连接
时间：2020-12-28
-
php实现顺序线性表
时间：2020-12-28
-
Python多重继承中的菱形继
时间：2020-12-28
-
php中break的作用
时间：2020-12-28
热门文章
-
php中常用的正则表达式使用方法
时间：2020-12-25
-
asp与php区别是什么？
时间：2020-12-27
-
PHP识别相片是否是颠倒的，并且重新摆正
时间：2020-12-28
-
Yii授权之基于角色的存取控制 （RBAC）
时间：2020-12-23
-
php的一键安装包有哪些 php环境搭建
时间：2020-12-19
-
php实现对图片对称加解密（适用身份证加
时间：2020-12-25
-
php如何理解面向对象
时间：2020-12-28
-
超详细分析php docker的原理及作用
时间：2020-12-27
-
Python控制Excel实现自动化办公
时间：2020-12-23
-
session的作用是什么
时间：2020-12-25